<!-- 固定悬浮窗控件设置面板 -->
<template>
    <el-tabs modelValue="widget" stretch>
        <el-tab-pane :label="`${widget.widgetData.component.title}组件`" name="widget">
            <el-scrollbar>
                <!-- 组件样式 -->
                <row-component-mode :widget="widget" />

                <!-- 组件风格 -->
                <suspension-type :widget="widget" />

                <!-- 悬浮窗列表 -->
                <row-content :widget="widget" />

                <el-collapse modelValue="1">
                    <el-collapse-item title="高级设置" name="1">
                        <layout-pane label="显示图标">
                            <el-switch v-model="customFeature.openIcon" />
                        </layout-pane>

                        <layout-pane label="显示文字">
                            <el-switch v-model="customFeature.openText" />
                        </layout-pane>
                    </el-collapse-item>
                </el-collapse>
                
                <!-- 元素可见设置 -->
                <row-element-visible :widget="widget" />
            </el-scrollbar>
        </el-tab-pane>

        <el-tab-pane label="组件样式" name="style">
            <el-scrollbar>
                <el-collapse modelValue="1">
                    <el-collapse-item title="组件设置" name="1">
                        <!-- 大小 -->
                        <row-size :widget="widget" />

                        <!-- 圆角 -->
                        <el-divider></el-divider>
                        <si-border-radius v-model="customFeature['border-radius']" />

                        <el-divider></el-divider>
                        <layout-pane label="位置">
                            <div>
                                <si-input-number
                                    v-model="widget.widgetData.eles.style.right"
                                    :min="0"
                                    label="距右"
                                    unit="px"
                                />
                                <si-input-number
                                    v-model="customFeature.margin"
                                    :min="0"
                                    label="间距"
                                />
                            </div>

                            <div style="margin-top: 10px;display: flex;align-items: center;">
                                <si-select
                                    v-model="positionType"
                                    :list="[
                                        { label: '置底', value: 'bottom' },
                                        { label: '置顶', value: 'top' }
                                    ]"
                                    style="width: 120px;margin-right: 12px"
                                />
                                <si-input-number
                                    v-model="customFeature[`${positionType}`]"
                                    :min="0"
                                    unit="px"
                                />
                            </div>
                        </layout-pane>

                        <!-- 背景 -->
                        <el-divider></el-divider>
                        <row-background :widget="widget" />

                        <!-- 透明 -->
                        <el-divider></el-divider>
                        <row-opacity :widget="widget" />
                    </el-collapse-item>
                </el-collapse>

                <el-collapse modelValue="1">
                    <el-collapse-item title="图标设置" name="1">
                        <layout-pane label="大小">
                            <si-input-number
                                v-model="customFeature['img-size']"
                                :min="0"
                            />
                        </layout-pane>

                        <el-divider></el-divider>
                        <layout-pane label="背景">
                            <si-color-picker
                                v-model="customFeature.lineBackgroundColor"
                                label="背景色"
                                show-alpha
                            />
                            <si-image-picker
                                v-model="customFeature.lineBackgroundImage"
                                type="image"
                                add-url
                                style="margin-left: 12px"
                            />
                        </layout-pane>

                        <el-divider></el-divider>
                        <layout-pane label="字体">
                            <row-font-style :widget="widget" />
                        </layout-pane>
                    </el-collapse-item>
                </el-collapse>
            </el-scrollbar>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
import { defineComponent, toRefs, computed } from 'vue'
import LayoutPane from '@/components/setting-pane/layout-pane'
import {
    SiInputNumber,
    SiSelect,
    SiBorderRadius,
    SiImagePicker,
    SiColorPicker
} from '@/components/setting-pane/setting-item'
import {
    RowComponentMode,
    RowContent,
    RowBorderRadius,
    RowSize,
    RowFontStyle,
    RowOpacity,
    RowBackground,
    RowElementVisible
} from '../../widget-setting-row'
import SuspensionType from './components/suspension-type'
export default defineComponent({
    name: 'SuspensionSetting',
    components: {
        LayoutPane,
        SiInputNumber,
        SiSelect,
        SiBorderRadius,
        SiImagePicker,
        SiColorPicker,
        RowComponentMode,
        RowContent,
        RowBorderRadius,
        RowSize,
        RowFontStyle,
        RowOpacity,
        RowBackground,
        RowElementVisible,
        SuspensionType
    },
    props: {
        widget: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const { widget } = toRefs(props)

        const customFeature = computed(() => widget.value.widgetData.eles.customFeature)

        const positionType = computed({
            get: () => {
                let value = 'bottom'
                const { bottom, top } = customFeature.value
                if (bottom !== undefined) {
                    value = 'bottom'
                } else if (top !== undefined) {
                    value = 'top'
                }
                return value
            },
            set: val => {
                if (val === 'bottom') {
                    customFeature.value.bottom = customFeature.value.top
                    delete customFeature.value.top
                } else if (val === 'top') {
                    customFeature.value.top = customFeature.value.bottom
                    delete customFeature.value.bottom
                }
            }
        })

        return {
            widget,
            customFeature,
            positionType
        }
    }
})
</script>
